<template>
  <div class="conditional-logic">
    <!-- <el-input type="textarea" autosize :value="JSON.stringify(pconditions, null, 4)" /> -->
    <div v-for="(item, index) in pconditions" :key="index">
      <el-card class="conditional-logic__group" size="mini">
        <div class="header" slot="header">
          <span class="header-title">条件组{{ index + 1 }}</span>
          <el-button type="text" icon="icon-ym icon-ym-btn-clearn"
            @click="handleDeleteGroup(index)"></el-button>
        </div>
        <!-- <el-input type="textarea" autosize :value="JSON.stringify(item, null, 4)" /> -->

        <condition-item v-for="(subItem, i) in item.groups" :key="index + i"
          v-model="item.groups[i]" :usedFormItems="usedFormItems"
          :formFieldsOptions="formFieldsOptions" :prevNodeList="prevNodeList"
          :paramsConfig="paramsConfig"
          :isRelation="item.groups.length > 1 && i !== item.groups.length - 1"
          @delete="handleDeleteItem(index, i)" />
        <el-button type="text" size="mini" class="icon-ym icon-ym-btn-add add-item-button"
          @click="handleAddCondition(index)">添加条件</el-button>
      </el-card>
      <div class="conditional-logic__relation"
        v-if="pconditions.length > 1 && index !== pconditions.length -1">
        <el-select class="relation-select" v-model="item.logic" placeholder="请选择"
          @change="handleChangeRelation">
          <el-option v-for="item in logicOptions" :key="item.value" :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="conditional-logic__control">
      <el-button type="info" plain class="icon-ym icon-ym-btn-add add-group-button" size="mini"
        @click="handleAddGroup">添加条件分组</el-button>
    </div>
  </div>
</template>

<script>
import ConditionItem from './ConditionItem';

export default {
  components: { ConditionItem },
  name: 'ConditionalLogic',
  props: {
    value: {
      type: Array,
      default: () => []
    },
    usedFormItems: {
      type: Array,
      default: () => []
    },
    formFieldsOptions: {
      type: Array,
      default: () => []
    },
    prevNodeList: {
      type: Array,
      default: () => []
    },
    paramsConfig: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      logicOptions: [
        {
          label: 'and',
          value: "and"
        },
        {
          label: 'or',
          value: "or"
        }
      ],
    }
  },
  computed: {
    pconditions: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    // 添加条件分组
    handleAddGroup() {
      const item = {
        logic: "and",
        id: +new Date(),
        groups: [{
          fieldName: '',
          symbolName: '',
          fieldValue: undefined,
          fieldType: 1,
          fieldValueType: 2,
          fieldLabel: '',
          fieldValueJnpfKey: '',
          logicName: '并且',
          field: '',
          symbol: '',
          logic: '&&',
          jnpfKey: '',
          cellKey: +new Date(),
        }]
      }
      this.pconditions.push(item)
    },
    // 删除条件分组
    handleDeleteGroup(index) {
      this.pconditions.splice(index, 1)
    },
    // 添加条件
    handleAddCondition(index) {
      this.pconditions[index].groups.push({
        fieldName: '',
        symbolName: '',
        fieldValue: undefined,
        fieldType: 1,
        fieldValueType: 2,
        fieldLabel: '',
        fieldValueJnpfKey: '',
        logicName: '并且',
        field: '',
        symbol: '',
        logic: '&&',
        jnpfKey: '',
        cellKey: +new Date(),
      })
    },
    handleDeleteItem(index, childIndex) {
      this.pconditions[index].groups.splice(childIndex, 1)
    },
    handleChangeRelation(item) {
      const logicName = this.logicOptions.find(i => i.value === item).label
      this.pconditions.logicName = logicName
    }
  }
}
</script>

<style lang="scss" scoped>
.conditional-logic {
  &__group {
    margin-bottom: 10px;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      &-title {
        font-size: 14px;
      }
    }

    .add-item-button {
      margin-top: 10px;
    }

    ::v-deep .el-card__header {
      padding: 6px 10px;
    }

    ::v-deep .el-card__body {
      padding: 10px;
    }
  }

  &__relation {
    margin: 10px 0;
    .relation-select {
      width: 90px;
    }
  }

  &__control {
    .add-group-button {
      width: 100%;
    }
  }
}
</style>

